<!-- author: xuett -->
<!-- date: 2024-06-25 16:18:35 -->
<!-- description: 左侧图表组件 -->
<template>
  <div class="left-box">
    <div class="header">组件列表</div>
    <div class="left-content">
      <draggable :list="chartList" :group="dragGroup" :sort="false" :clone="dragClone" item-key="id">
        <template #item="{ element }">
          <div>{{ element.name }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import draggable from "vuedraggable";

const chartList = ref([
  { name: "图表1", id: 1, component: "bar", width: 200, height: 200 },
  { name: "图表2", id: 2, component: "bar", width: 200, height: 200 },
  { name: "图表3", id: 3, component: "bar", width: 200, height: 200 },
  { name: "图表4", id: 4, component: "bar", width: 200, height: 200 }
]);

const state = reactive({
  dragGroup: {
    name: "chartDrag",
    pull: "clone",
    put: false
  }
});
const { dragGroup } = toRefs(state);

onMounted(() => {
  chartList.value.forEach((item, index) => {
    if (index % 2) {
      item.options = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    } else {
      item.options = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };
    }
  });
});

const dragClone = (origin) => {
  return JSON.parse(JSON.stringify(origin));
};
</script>

<style scoped lang="scss">
.left-box {
  width: 300px;
  height: 100%;
  border-right: 1px solid #ccc;
  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
  }
  .left-content {
    width: 100%;
    height: calc(100% - 40px);
  }
}
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
</style>
